{extend name="/base"}
{block name="css"}
   <link rel="stylesheet" href="__ADMIN__/css/pearForm.css" />
   <style>
    .pear-container{background-color:white;}
    body{margin: 10px;}
           /*图标展示*/
   .site-doc-icon{width: 100%;background-color: #fff}
   .site-doc-icon li{cursor:pointer;display: inline-block; vertical-align: middle; width: 127px; height: 105px; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;}
   .site-doc-anim li{height: auto;}
   .site-doc-icon li .layui-icon{display: inline-block; font-size: 36px;}
   .site-doc-icon li .doc-icon-name,
   .site-doc-icon li .doc-icon-code{color: #c2c2c2;}
   .site-doc-icon li .doc-icon-code xmp{margin:0}
   .site-doc-icon li .doc-icon-fontclass{height: 40px; line-height: 20px; padding: 0 5px; font-size: 13px; color: #333; }
   .site-doc-icon li:hover{background-color: #f2f2f2; color: #000;}
   </style>
{/block}
{block name="body"}
    <form class="layui-form  edit-form" action="" lay-filter="component-form-element">
        <div class="layui-form-item">
            <label for="" class="layui-form-label">父级</label>
            <div class="layui-input-block">
                <select name="pid" lay-verify="requried">
                    <option value="0">顶级</option>
                    {foreach $permissions as $k1=>$p1}
                        <option value="{$p1.id}" {if isset($model) && $model->pid==$p1['id']} selected {/if} >{$p1.title}</option>
                        {if isset($p1['children']) && !empty($p1['children']) }
                            {foreach $p1['children'] as $k2=>$p2}
                                <option value="{$p2.id}" {if isset($model) && $model->pid==$p2['id']} selected {/if} >&nbsp;&nbsp;&nbsp;┗━━{$p2.title}</option>
                            {/foreach}
                        {/if}
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                所属多级
            </label>
            <div class="layui-input-block">
                <select lay-verify="required" name="mid">
                    {foreach $multi as $k=>$v}
                    <option value="{$k}">
                        {$v}
                    </option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">权限名称</label>
            <div class="layui-input-block">
                <input type="text" maxlength="16" name="title" value="{$model->title??''}" lay-verify="required" placeholder="请输入权限名称" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="href" value="{$model->href??''}" lay-verify="required" placeholder="请输入地址" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">图标</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="hidden" name="icon" >
            </div>
            <div class="layui-form-mid layui-word-aux" id="icon_box">
                <i class="layui-icon {$model->icon??''}"></i>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <button type="button" class="layui-btn layui-btn-xs" onclick="showIconsBox()">选择图标</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限类型：</label>
            <div class="layui-input-block">
            {if empty($model->type)}
              <input type="radio" name="type" value="0" title="目录" checked>
              <input type="radio" name="type" value="1" title="菜单">
            {else}
              <input type="radio" name="type" value="0" title="目录" {if condition="$model->type eq 0"} checked {/if}>
              <input type="radio" name="type" value="1" title="菜单" {if condition="$model->type eq 1"} checked {/if}>
            {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="{$model->sort??10}" lay-verify="required" placeholder="排序权重" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="apiform">提 交</button>
            </div>
        </div>
    </form>
    {/block}
    {block name="js"}
    <script>
        layui.use(['jquery','form','layer'],function () {
               var $=layui.jquery;
               var form=layui.form;
               var layer=layui.layer;
       
               //选择图标
               window.chioceIcon = function (obj) {
                       var icon = $(obj).data('class');
                       $("input[name='icon']").val('layui-icon '+icon);
                       $("#icon_box").html('<i class="layui-icon '+$(obj).data('class')+'"></i> '+$(obj).data('name'));
                       layer.closeAll();
                   }
       
               //弹出图标
               window.showIconsBox = function () {
                   var index = layer.load();
                   $.get("__ADMIN__/icons.json",function (res) {
                       layer.close(index);
                       var html = '<ul class="site-doc-icon">';
                       $.each(res,function (index,item) {
                           html += '<li onclick="chioceIcon(this)" data-class="'+item.class+'" data-name="'+item.name+'" >';
                           html += '   <i class="layui-icon '+item.class+'"></i>';
                           html += '   <div class="doc-icon-name">'+item.name+'</div>';
                           html += '   <div class="doc-icon-code"><xmp>'+item.unicode+'</xmp></div>';
                           html += '   <div class="doc-icon-fontclass">'+item.class+'</div>';
                           html += '</li>'
                       });
                       html += '</ul>';
                       layer.open({
                           type:1,
                           title:'选择图标',
                           area : ['90%','90%'],
                           content:html
                       })
                   },'json')
               }
           })
       </script>
    {/block}